<template>  
    <div class="scrolling-text-container" ref="scrollingContainer" :style="{height:height}">  
      <div class="scrolling-text" :style="{ transform: `translateY(${-scrollTop}px)` }">  
       <div v-html="text"></div> 
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    name: 'ScrollingString',  
    props: {  
      text: {  
        type: String,  
        required: true  
      },  
      scrollSpeed: {  
        type: Number,  
        default: 0.5
      } ,
      height : {  
        type: String,  
        required: true  
      },  
    },  
    data() {  
      return {  
        scrollTop: 0,  
        textHeight: 0,  
        containerHeight: 0,  
        scrolling: false  
      };  
    },  
    mounted() {  
      this.measureTextHeight();  
      this.startScrolling();  
    },  
    beforeDestroy() {  
      this.stopScrolling();  
    },  
    methods: {  
      startScrolling() {  
        if (!this.scrolling) {  
          this.scrolling = true;  
          this.scrollText();  
        }  
      },  
      stopScrolling() {  
        this.scrolling = false;  
      },  
      scrollText() {  
        if (!this.scrolling) return;  
        const maxHeight = this.textHeight - this.containerHeight;  
        if (this.scrollTop < maxHeight) {  
          this.scrollTop += this.scrollSpeed;  
        } else {  
          this.scrollTop = 0;  
        }  
        requestAnimationFrame(() => this.scrollText());  
      },  
      measureTextHeight() {  
        const tempElement = document.createElement('span');  
        tempElement.innerText = this.text;  
        tempElement.style.position = 'absolute';  
        tempElement.style.whiteSpace = 'pre-wrap';  
        tempElement.style.visibility = 'hidden';  
        this.$el.appendChild(tempElement);  
        this.textHeight = tempElement.offsetHeight;  
        this.containerHeight = this.$refs.scrollingContainer.clientHeight;  
        this.$el.removeChild(tempElement);  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .scrolling-text-container {  
    overflow: hidden;  
    position: relative;  
    height: 200px; /* Adjust the height as needed */  
  }  
    
  .scrolling-text {  
    position: relative;  
    white-space: pre-wrap;  
  }  
  </style>